<template>
  <div class="search_box">
    <HYTitle title="chaxun" />
    <van-cell-group>
      <van-field v-model="licensee" label="姓名" placeholder="请输入姓名" />
      <van-field
        v-model="number"
        label="档案标号"
        placeholder="请输入档案标号"
      />
    </van-cell-group>
    <van-button
      @click="handSearch()"
      style="width: 100%; margin-top: 24px"
      size="small"
      color="#222"
      >查 询</van-button
    >
    <div class="content" v-if="content">
      {{ content }}
    </div>
    <van-image v-if="imgUrl" @click="handBgImg" :src="imgUrl" />
    <van-button
      v-if="fileUrl"
      @click="handDowPdf()"
      style="width: 100%; margin-top: 24px"
      size="small"
      color="#222"
      >下载PDF</van-button
    >
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import HYTitle from "@/components/HYTtile.vue";
import { verification } from "@/utils/apis/home";
import { Toast, ImagePreview } from "vant";
export default defineComponent({
  name: "Search",
  components: {
    HYTitle,
  },
  props: {},

  setup() {
    const state = reactive({
      licensee: "",
      number: "",
      content: "",
      imgUrl: "",
      fileUrl: "",
    });
    // verification
    const handBgImg = () => {
      ImagePreview({
        images: [state.imgUrl],
      });
    };
    const handDowPdf = () => {
      window.open(state.fileUrl);
    };
    const handSearch = async () => {
      if (!state.licensee) {
        Toast.fail("请输入姓名");
        return;
      }
      if (!state.number) {
        Toast.fail("请输入档案标号");
        return;
      }
      try {
        const res = await verification({
          licensee: state.licensee,
          number: state.number,
        });
        state.content = res.data ? res.data.name : "未找到数据!";
        state.imgUrl = res.data.imgUrl;
        state.fileUrl = res.data.fileUrl;
      } catch (error) {
        console.log(error);
        state.content = error.content;
      }
    };
    return { ...toRefs(state), handSearch, handBgImg, handDowPdf };
  },
});
</script>
<style lang="scss" scoped>
.search_box {
  .content {
    font-size: 14px;
    margin-top: 20px;
    text-align: center;
    color: #f4b069;
    margin-bottom: 20px;
  }
}
</style>
